<template>
  <div>
    <el-form
      label-width="180px"
      label-position="left"
    >
      <!-- 性别 -->
      <el-form-item label="性别">
        <el-radio-group v-model="sex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
          <el-radio label="保密">保密</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 个人简历 -->
      <el-form-item label="个人简历">
        <el-input
          v-model="jianli"
          :rows="6"
          type="textarea"
          resize="none"
          placeholder="填写你的个人简历"
        ></el-input>
      </el-form-item>
      <el-form-item label="个人网站">
        <el-input
          v-model="website"
          placeholder="http://你的网站"
        ></el-input>
        <p class="tishi">填写后会在个人主页显示图标</p>
      </el-form-item>
      <el-form-item label="微信二维码">
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :limit="1"
        >
          <i
            slot="default"
            class="el-icon-plus"
          ></i>
          <div
            slot="file"
            slot-scope="{file}"
          >
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            >
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img
            width="100%"
            :src="dialogImageUrl"
            alt=""
          >
        </el-dialog>
        <p class="tishi">上传后会在个人主页显示图标</p>
      </el-form-item>
    </el-form>
    <div>
      <el-button
        type="success"
        size="small"
        round
        style="width:100px"
      >保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "profile",
  data() {
    return {
      sex: "",
      jianli: "",
      website: "",
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    handleRemove(file) {
      console.log(file);
      file = "";
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>

<style scoped>
.el-form-item {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 1.25rem;
}
.tishi {
  margin-top: 10px;
  color: #888888;
  text-align: right;
}
</style>